<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/amazeui.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				max-width: 640px;
				margin: auto;
			}
			
			.clear {
				clear: both;
			}
			
			.top {
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #FF608E;
			}
			
			.top span {
				color: white;
				font-size: 18px;
				font-weight: bold;
				color: white;
			}
			
			#myfoot a {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			#myfoot span:first-of-type {
				font-size: 16px;
			}
			
			.top .topback {
				font-size: 14px;
				float: left;
				margin-left: 5px;
			}
			
			.ziliao {
				margin: 5px 0px;
				background-color: #D8D8D8;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			
			.maintop {
				position: relative;
				color: white;
			}
			
			.maintop>div {
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: 100%;
				height: 40px;
				background-color: rgba(0, 0, 0, 0.5);
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			.maintop img {
				width: 100%;
			}
			/*时间组件*/
			
			.maintime,
			.myziliao,
			.mydangan {
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: #4CD964;
				margin: 10px 0px;
				color: white;
			}
			
			.myziliao {
				background-color: #23ABF0;
			}
			
			.mydangan {
				background-color: #586C94;
			}
			
			#ziliao>div {
				/*height: 40px;*/
				line-height: 40px;
				font-size: 14px;
				border-radius: 10px;
				margin: 5px;
				border: 1px solid #C0BFC4;
				display: -webkit-box;
			}
			
			#ziliao>div div:first-of-type {
				text-align: center;
				margin-right: 10px;
				width: 50px;
				height: 100%;
			}
			
			#ziliao>div div:last-of-type {
				-webkit-box-flex: 1;
				word-break: break-all;
			}
			
			#anli {
				/*display: -webkit-box;*/
			}
			
			.anlimain {
				float: left;
				width: 50%;
				padding: 10px;
				cursor: pointer;
				box-sizing: border-box;
				/*background-color: #4CD964;*/
			}
			
			.anlimain img {
				width: 100%;
			}
			
			.imgmain {
				height: 30px;
				text-align: center;
				background-color: white;
				border: 1px solid #999999;
				margin-top: 5px;
			}
			
			.allbig {
				position: absolute;
				width: 100%;
				background-color: black;
				top: 0px;
				left: 0px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				display: none;
			}
			
			.esc {
				width: 200px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 10px;
				background-color: #AA3333;
				color: white;
			}
			
			.alldiv {
				padding: 10px;
			}
			
			.alldiv img {
				width: 100%;
			}
			/*showdiv*/
			
			.am-modal-dialog {
				border: 1px solid #FF608E;
				background-color: white;
				border-radius: 20px;
			}
			
			.showdiv,
			.showbdiv {
				padding: 5px;
				font-size: 14px;
				background-color: white;
				-webkit-box-flex: 1;
				margin: 0px 20px;
				padding: 10px;
				border-radius: 10px;
			}
			
			.showbdiv {
				font-size: 14px;
				display: none;
			}
			
			.showbtop {
				padding-top: 20px;
			}
			
			.showbfoot {
				border-radius: 10px;
				background-color: #FF608E;
				color: white;
				height: 30px;
				width: 70px;
				line-height: 30px;
				margin: 10px auto;
			}
			
			.showdiv>div {
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				text-align: center;
				margin-bottom: 10px;
			}
			
			.showyajin>div {
				-webkit-box-flex: 1;
			}
			
			.two>div {
				width: 50%;
			}
			
			.showtop {
				color: #FF608E;
			}
			
			.showzhifu {
				background-color: #FF608E;
				color: white;
				border-radius: 10px;
				padding: 3px 0px;
				border: 2px solid white;
			}
			
			.showquxiao {
				background-color: #E5E5E5;
				border-radius: 10px;
				padding: 3px 0px;
				border: 2px solid white;
			}
			/*日期设置*/
			
			.am-datepicker-old {
				color: #E5E5E5 !important;
			}
			
			.am-datepicker-day.am-disabled {
				color: #FF608E !important;
			}
		</style>
	</head>

	<body>
		<!--全屏-->
		<div class="allbig">
			<div class="alldiv">
				<img :src="bigimg" />
			</div>
			<div class="esc">退出全屏</div>
		</div>
		<!--最外层-->
		<div class="big">
			<div class="top" data-am-sticky>
				<span class="topback Hui-iconfont Hui-iconfont-slider-left"></span>
				<span>Y & M</span>
			</div>
			<!--资料-->
			<div class="ziliao" v-html="info.attributes.name">
				皇家马德里
			</div>
			<!--详情-->
			<div class="main">
				<div class="maintop">
					<img :src="info.attributes.imgs[0]" />
					<div>
						<div v-html="info.attributes.name">皇家马德里</div>
					</div>
				</div>
				<div class="maintime">
					查看档期
				</div>
				<div class="myziliao" data-am-collapse="{target: '#ziliao'}">
					酒店资料
				</div>
				<div id="ziliao" class="am-collapse">
					<div>
						<div>名称</div>
						<div v-html="info.attributes.name">皇家马德里</div>
					</div>
					<div>
						<div>级别</div>
						<div v-html="info.attributes.rank">五星酒店</div>
					</div>
					<div>
						<div>联系</div>
						<div v-html="info.attributes.phone">0372-11023213</div>
					</div>
					<div>
						<div>地址</div>
						<div v-html="info.attributes.address">天津市西青区津市西青市西青市西青区津市西青区南开创元992号</div>
					</div>
				</div>
				<div class="mydangan" data-am-collapse="{target:'#anli'}">
					查看详情
				</div>
				<div class="am-collapse" id="anli">
					<div class="anlimain" @click="click(item)" v-for="item in info.attributes.imgs">
						<div>
							<img :src="item" />
						</div>
						<div class="imgmain" v-html="info.attributes.name">

						</div>
					</div>
					<div class="clear">

					</div>
				</div>
			</div>
			<!--点击详情显示div-->
			<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
				<div class="am-modal-dialog">
					<div class="showdiv">
						<div class="showtop">确定预约？</div>
						<div class="two">
							<div>名称</div>
							<div v-html="info.attributes.name">东方不败</div>
						</div>
						<div class="two">
							<div>业务</div>
							<div>酒店</div>
						</div>
						<div class="two">
							<div>预定日期</div>
							<div v-html="nowtime"></div>
						</div>
						<div class="two">
							<div>联系</div>
							<div v-html="info.attributes.phone">123-2323-3213</div>
						</div>
						<div class="showyajin">
							<div class="on">押金</div>
							<span class="on">--</span>
							<div>首款</div>
							<span>--</span>
							<div>尾款</div>
						</div>
						<div class="showyajin">
							<div class="on">￥3000</div>
							<span class="on">--</span>
							<div>￥3000</div>
							<span>--</span>
							<div>￥3000</div>
						</div>
						<div class="two">
							<div class="showzhifu">支付</div>
							<div class="showquxiao">取消</div>
						</div>
					</div>
					<div class="showbdiv">
						<div class="showbtop">
							预约完成，请耐心等候
						</div>
						<div class="showbfoot" @click="close()">
							确定
						</div>
					</div>
				</div>
			</div>
			<!--脚步-->
			<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="myfoot">
				<ul class="am-navbar-nav am-cf am-avg-sm-4">
					<li>
						<a href="../index.html">
							<span class="Hui-iconfont  Hui-iconfont-home"></span>
							<span class="am-navbar-label">主页</span>
						</a>
					</li>
					<li>
						<a href="../page2/page2.html">
							<span class="Hui-iconfont Hui-iconfont-moban-2"></span>
							<span class="am-navbar-label">详情</span>
						</a>
					</li>
					<li>
						<a href="../page3/page3.html">
							<span class="Hui-iconfont Hui-iconfont-comment"></span>
							<span class="am-navbar-label">信息</span>
						</a>
					</li>
					<li>
						<a href="../page4/page4.html">
							<span class="Hui-iconfont Hui-iconfont-avatar"></span>
							<span class="am-navbar-label">个人中心</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/amazeui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue/xinxibvue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//详情关闭
			$(".showquxiao").click(function() {
					$("#my-alert").modal('close');
				})
				//点击支付
			$(".showzhifu").click(function() {
				$(".showdiv").css("display", "none");
				$(".showbdiv").css("display", "block");
			})

			//全屏
			$(".anlimain img").click(function() {
					$(".big").css("display", "none");
					$(".allbig").css("display", "-webkit-box").css("height", $(window).height());
				})
				//退出全屏
			$(".esc").click(function() {
					$(".allbig").css("display", "none");
					$(".big").css("display", "block");
				})
				//日历
			var nowTemp = new Date();
			var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
			var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
			var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

			function timePickInit(arr) {
				console.log("进入");
				console.log(arr);
				console.log(arr.length);
				$('.maintime').datepicker({
					onRender: function(date, viewMode) {
						console.log("进入西宁换");
						// 默认 days 视图，与当前日期比较
						var viewDate = nowDay;
						switch(viewMode) {
							// moths 视图，与当前月份比较
							case 1:
								viewDate = nowMoth;
								break;
								// years 视图，与当前年份比较
							case 2:
								viewDate = nowYear;
								break;
						}

						if(date.valueOf() < viewDate) {
							return 'am-disabled'
						} else {
							for(var i = 0; i < myvue.time; i++) {
								if(date.valueOf() == new Date(arr[i]).valueOf()) {
									console.log(arr.length);
									return 'am-disabled'
								}
							}
						}
					}
				}).
				on('changeDate.datepicker.amui', function(event) {
					console.log(event.date.valueOf());
					console.log(formatDate(event.date));
					if(event.viewMode == "days") {
						$("#my-alert").modal('open');
						$(".showdiv").css("display", "block");
						$(".showbdiv").css("display", "none");
					};
					myvue.nowtime = formatDate(event.date);
				});
				console.log("over");
			}
			//标准时间转为2012-2-12
			function formatDate(date) {
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + "-" + month + "-" + day;
			}
			//返回
			$(".topback").click(function() {
				location.href = "page2c.html"
			})
		</script>
	</body>

</html>